റിയാക്റ്റ് useState: സ്റ്റേറ്റ് ഹുക്ക് ഒപ്റ്റിമൈസേഷനും മികച്ച രീതികളും

റിയാക്റ്റിലെ ഫംഗ്ഷണൽ കമ്പോണന്റുകളിലെ സ്റ്റേറ്റ് മാനേജ്മെന്റിന്റെ ഒരു അടിസ്ഥാന ഘടകമാണ് useState ഹുക്ക്. ഉപയോഗിക്കാൻ എളുപ്പമാണെങ്കിലും, തെറ്റായ രീതിയിൽ കൈകാര്യം ചെയ്യുന്നത്, പ്രത്യേകിച്ച് സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകളിൽ, പ്രകടനത്തെ ബാധിക്കാനും അപ്രതീക്ഷിത പെരുമാറ്റങ്ങൾക്കും കാരണമാകും. ഈ ഗൈഡ് useState ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളെയും മികച്ച രീതികളെയും കുറിച്ച് വിശദമായി പ്രതിപാദിക്കുന്നു, നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ മികച്ച പ്രകടനമുള്ളതും, പരിപാലിക്കാൻ എളുപ്പമുള്ളതും, ആഗോളതലത്തിൽ സ്കേലബിൾ ആണെന്നും ഉറപ്പാക്കുന്നു.

useState-ന്റെ അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കാം

ഒപ്റ്റിമൈസേഷനിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, നമുക്ക് അടിസ്ഥാനകാര്യങ്ങൾ പെട്ടെന്ന് ഒന്ന് നോക്കാം. ഫംഗ്ഷണൽ കമ്പോണന്റുകളിലേക്ക് സ്റ്റേറ്റ് ചേർക്കാൻ useState ഹുക്ക് നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് ഒരു പ്രാരംഭ സ്റ്റേറ്റ് മൂല്യം ആർഗ്യുമെന്റായി എടുക്കുകയും, നിലവിലെ സ്റ്റേറ്റും അത് അപ്ഡേറ്റ് ചെയ്യാനുള്ള ഒരു ഫംഗ്ഷനും അടങ്ങുന്ന ഒരു അറേ തിരികെ നൽകുകയും ചെയ്യുന്നു.

ഉദാഹരണം:

            import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, count നിലവിലെ സ്റ്റേറ്റ് മൂല്യം സൂക്ഷിക്കുന്നു, setCount അത് അപ്ഡേറ്റ് ചെയ്യാൻ ഉപയോഗിക്കുന്ന ഫംഗ്ഷനാണ്. ബട്ടണിൽ ക്ലിക്കുചെയ്യുന്നത് കൗണ്ട് വർദ്ധിപ്പിക്കുന്നു.

useState ഉപയോഗിക്കുമ്പോൾ ഉണ്ടാകുന്ന സാധാരണ പ്രശ്നങ്ങളും പ്രകടനത്തിലെ വെല്ലുവിളികളും

ലളിതമായി തോന്നാമെങ്കിലും, ശ്രദ്ധയോടെ ഉപയോഗിച്ചില്ലെങ്കിൽ useState പ്രകടന പ്രശ്നങ്ങൾക്ക് കാരണമാകും. ചില സാധാരണ പ്രശ്നങ്ങൾ താഴെ പറയുന്നവയാണ്:

• അനാവശ്യമായ റീ-റെൻഡറുകൾ: പ്രോപ്‌സുകളിൽ മാറ്റം വന്നിട്ടില്ലെങ്കിൽ പോലും കമ്പോണന്റുകൾ വീണ്ടും റെൻഡർ ചെയ്യുമ്പോൾ ആണ് ഏറ്റവും സാധാരണമായ പ്രശ്നം ഉണ്ടാകുന്നത്. സ്റ്റേറ്റ് അടിക്കടി അപ്‌ഡേറ്റ് ചെയ്യുമ്പോഴോ അല്ലെങ്കിൽ അപ്‌ഡേറ്റുകൾ ചൈൽഡ് കമ്പോണന്റുകളിൽ അനാവശ്യമായ റീ-റെൻഡറുകൾക്ക് കാരണമാകുമ്പോഴോ ഇത് സംഭവിക്കാം.
• നേരിട്ടുള്ള സ്റ്റേറ്റ് മാറ്റം: സ്റ്റേറ്റിനെ നേരിട്ട് മാറ്റുന്നത് (ഉദാഹരണത്തിന്, state.property = newValue) റിയാക്റ്റിന്റെ അപ്‌ഡേറ്റ് മെക്കാനിസത്തെ മറികടക്കുകയും അപ്രതീക്ഷിതമായ പെരുമാറ്റത്തിന് കാരണമാകുകയും ചെയ്യും. എപ്പോഴും useState നൽകുന്ന സ്റ്റേറ്റ് അപ്‌ഡേറ്റർ ഫംഗ്ഷൻ ഉപയോഗിക്കുക.
• സങ്കീർണ്ണമായ സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ: സ്റ്റേറ്റ് അപ്‌ഡേറ്റർ ഫംഗ്ഷനകത്ത് ചിലവേറിയ കണക്കുകൂട്ടലുകളോ സങ്കീർണ്ണമായ മാറ്റങ്ങളോ നടത്തുന്നത് നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ വേഗത കുറയ്ക്കും.
• തെറ്റായ പ്രാരംഭ സ്റ്റേറ്റ്: തെറ്റായതോ അല്ലെങ്കിൽ ശരിയായി നിർവചിക്കാത്തതോ ആയ ഒരു പ്രാരംഭ സ്റ്റേറ്റ് നൽകുന്നത് പിന്നീട് പിശകുകൾക്കും അപ്രതീക്ഷിത പെരുമാറ്റങ്ങൾക്കും കാരണമാകും.

useState-നുള്ള ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ

ഇനി, ഈ പ്രശ്നങ്ങൾ ലഘൂകരിക്കുന്നതിനും നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകളുടെ പ്രകടനം വർദ്ധിപ്പിക്കുന്നതിനുമുള്ള വിവിധ ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ നമുക്ക് പരിചയപ്പെടാം:

1. ഫംഗ്ഷണൽ അപ്‌ഡേറ്റുകൾ ഉപയോഗിക്കുക

മുമ്പത്തെ മൂല്യത്തെ അടിസ്ഥാനമാക്കി സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുമ്പോൾ, സ്റ്റേറ്റ് അപ്‌ഡേറ്റർ ഫംഗ്ഷന്റെ ഫംഗ്ഷണൽ രൂപം ഉപയോഗിക്കുക. ഇത് നിങ്ങൾ ഏറ്റവും പുതിയ സ്റ്റേറ്റ് ഉപയോഗിച്ചാണ് പ്രവർത്തിക്കുന്നതെന്ന് ഉറപ്പാക്കുന്നു, പ്രത്യേകിച്ചും അസിൻക്രണസ് സാഹചര്യങ്ങളിലോ ഒന്നിലധികം അപ്‌ഡേറ്റുകൾ ഒരുമിച്ച് നടക്കുമ്പോഴോ.

ഉദാഹരണം (തെറ്റ്):

            function IncorrectComponent() {
  const [count, setCount] = useState(0);

  const incrementTwice = () => {
    setCount(count + 1);
    setCount(count + 1); // Potentially incorrect: relies on stale `count` value
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementTwice}>Increment Twice</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ഉദാഹരണം (ശരി):

            function CorrectComponent() {
  const [count, setCount] = useState(0);

  const incrementTwice = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1); // Correct: uses the previous state for each update
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementTwice}>Increment Twice</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ശരിയായ ഉദാഹരണത്തിൽ, സ്റ്റേറ്റ് അപ്‌ഡേറ്റർ ഫംഗ്ഷന് മുമ്പത്തെ സ്റ്റേറ്റ് ഒരു ആർഗ്യുമെന്റായി (prevCount) ലഭിക്കുന്നു, ഇത് സമയമോ ബാച്ചിംഗോ പരിഗണിക്കാതെ കൃത്യമായ അപ്‌ഡേറ്റുകൾ നടത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു.

2. ഇമ്മ്യൂട്ടബിലിറ്റി പ്രധാനം

സ്റ്റേറ്റിനെ ഒരിക്കലും നേരിട്ട് മാറ്റരുത്. അപ്‌ഡേറ്റ് ചെയ്യുമ്പോൾ എപ്പോഴും സ്റ്റേറ്റ് ഒബ്ജക്റ്റിന്റെയോ അറേയുടെയോ ഒരു പുതിയ പകർപ്പ് ഉണ്ടാക്കുക. ഇത് റിയാക്റ്റിന് മാറ്റങ്ങൾ കാര്യക്ഷമമായി കണ്ടെത്താനും ആവശ്യമുള്ളപ്പോൾ മാത്രം റീ-റെൻഡർ ചെയ്യാനും സഹായിക്കുന്നു.

ഉദാഹരണം (തെറ്റ് - നേരിട്ടുള്ള മാറ്റം):

            function IncorrectObjectComponent() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    user.name = 'Jane'; // Direct mutation: Avoid this!
    setUser(user); // React might not detect the change
  };

  return (
    <div>
      <p>Name: {user.name}, Age: {user.age}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ഉദാഹരണം (ശരി - ഇമ്മ്യൂട്ടബിലിറ്റി ഉപയോഗിച്ച്):

            function CorrectObjectComponent() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    setUser({ ...user, name: 'Jane' }); // Create a new object with the updated name
  };

  return (
    <div>
      <p>Name: {user.name}, Age: {user.age}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ശരിയായ ഉദാഹരണത്തിൽ, സ്പ്രെഡ് ഓപ്പറേറ്റർ (...) user ഒബ്ജക്റ്റിന്റെ ഒരു ഷാലോ കോപ്പി ഉണ്ടാക്കുന്നു, ഇത് setUser-ന് ഒരു പുതിയ ഒബ്ജക്റ്റ് ലഭിക്കുന്നുവെന്നും ഒരു റീ-റെൻഡർ നടക്കുന്നുവെന്നും ഉറപ്പാക്കുന്നു.

3. അനാവശ്യമായ റീ-റെൻഡറുകൾ ഒഴിവാക്കാൻ useMemo ഉപയോഗിക്കുക

ചിലവേറിയ കണക്കുകൂട്ടലുകളുടെയോ ഒബ്ജക്റ്റ് നിർമ്മാണങ്ങളുടെയോ ഫലം മെമ്മോയിസ് (കാഷെ) ചെയ്യാൻ useMemo ഹുക്ക് ഉപയോഗിക്കാം. ഇത് ഓരോ റീ-റെൻഡറിലും അനാവശ്യമായി ഈ കണക്കുകൂട്ടലുകൾ വീണ്ടും നടക്കുന്നത് തടയുന്നു.

ഉദാഹരണം:

            import React, { useState, useMemo } from 'react';

function ExpensiveCalculationComponent() {
  const [count, setCount] = useState(0);

  // Simulate an expensive calculation
  const expensiveValue = useMemo(() => {
    console.log('Performing expensive calculation...');
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += i;
    }
    return result;
  }, []); // Empty dependency array: only calculate once on initial render

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, കമ്പോണന്റ് ആദ്യമായി റെൻഡർ ചെയ്യുമ്പോൾ മാത്രമാണ് expensiveValue കണക്കാക്കുന്നത്. തുടർന്നുള്ള റീ-റെൻഡറുകൾ (count സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് കാരണം സംഭവിക്കുന്നത്) കാഷെ ചെയ്ത മൂല്യം ഉപയോഗിക്കും, അതുവഴി ചിലവേറിയ കണക്കുകൂട്ടൽ ഒഴിവാക്കുന്നു.

4. ഇവന്റ് ഹാൻഡ്‌ലറുകൾ മെമ്മോയിസ് ചെയ്യാൻ useCallback

ചൈൽഡ് കമ്പോണന്റുകളിലേക്ക് ഇവന്റ് ഹാൻഡ്‌ലർ ഫംഗ്ഷനുകൾ പ്രോപ്‌സായി കൈമാറുമ്പോൾ, ഫംഗ്ഷൻ മെമ്മോയിസ് ചെയ്യാൻ useCallback ഉപയോഗിക്കുക. ഇത് പാരന്റ് കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുമ്പോൾ ചൈൽഡ് കമ്പോണന്റ് അനാവശ്യമായി റീ-റെൻഡർ ചെയ്യുന്നത് തടയുന്നു.

ഉദാഹരണം:

            import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Memoize the increment function using useCallback
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Dependency array: re-create the function only when 'count' changes

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={increment} />
    </div>
  );
}

// Assuming ChildComponent is memoized using React.memo
const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent re-rendered!');
  return <button onClick={onClick}>Increment (Child)</button>;
});

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, useCallback increment ഫംഗ്ഷനെ മെമ്മോയിസ് ചെയ്യുന്നു, ഇത് count മൂല്യം (അതിനാൽ increment ഫംഗ്ഷനും) മാറിയില്ലെങ്കിൽ ChildComponent റീ-റെൻഡർ ചെയ്യുന്നത് തടയുന്നു.

5. സ്റ്റേറ്റിനെ ചെറിയ, സ്വതന്ത്ര ഭാഗങ്ങളായി വിഭജിക്കുക

നിങ്ങളുടെ കമ്പോണന്റിന് വലുതും സങ്കീർണ്ണവുമായ ഒരു സ്റ്റേറ്റ് ഒബ്ജക്റ്റ് ഉണ്ടെങ്കിൽ, ഒന്നിലധികം useState ഹുക്കുകൾ ഉപയോഗിച്ച് അതിനെ ചെറിയ, സ്വതന്ത്ര സ്റ്റേറ്റ് ഭാഗങ്ങളായി വിഭജിക്കുന്നത് പരിഗണിക്കുക. ഇത് മാറിയ സ്റ്റേറ്റിനെ ആശ്രയിക്കുന്ന കമ്പോണന്റിന്റെ നിർദ്ദിഷ്ട ഭാഗങ്ങൾ മാത്രം അപ്‌ഡേറ്റ് ചെയ്യാൻ റിയാക്റ്റിനെ അനുവദിക്കുന്നു, അതുവഴി അനാവശ്യമായ റീ-റെൻഡറുകൾ കുറയ്ക്കുന്നു.

ഉദാഹരണം (മുമ്പ് - വലിയ സ്റ്റേറ്റ് ഒബ്ജക്റ്റ്):

            function LargeStateComponent() {
  const [state, setState] = useState({
    name: 'John',
    age: 30,
    city: 'New York',
    country: 'USA'
  });

  const updateName = () => {
    setState({ ...state, name: 'Jane' });
  };

  const updateAge = () => {
    setState({ ...state, age: 31 });
  };

  return (
    <div>
      <p>Name: {state.name}</p>
      <p>Age: {state.age}</p>
      <p>City: {state.city}</p>
      <p>Country: {state.country}</p>
      <button onClick={updateName}>Update Name</button>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ഉദാഹരണം (ശേഷം - സ്റ്റേറ്റ് വിഭജിച്ചത്):

            function SplitStateComponent() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);
  const [city, setCity] = useState('New York');
  const [country, setCountry] = useState('USA');

  const updateName = () => {
    setName('Jane');
  };

  const updateAge = () => {
    setAge(31);
  };

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>City: {city}</p>
      <p>Country: {country}</p>
      <button onClick={updateName}>Update Name</button>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
}

            

              
                Copy
              
            
          

സ്റ്റേറ്റിനെ വ്യക്തിഗത useState ഹുക്കുകളായി വിഭജിക്കുന്നതിലൂടെ, name അപ്‌ഡേറ്റ് ചെയ്യുന്നത് name സ്റ്റേറ്റിനെ ആശ്രയിക്കുന്ന കമ്പോണന്റിന്റെ ഭാഗങ്ങളിൽ മാത്രം ഒരു റീ-റെൻഡറിന് കാരണമാകുന്നു, ഇത് പ്രകടനം മെച്ചപ്പെടുത്തുന്നു.

6. ചിലവേറിയ ഇനീഷ്യൽ സ്റ്റേറ്റിനായി ലേസി ഇനിഷ്യലൈസേഷൻ

പ്രാരംഭ സ്റ്റേറ്റ് കണക്കാക്കുന്നത് കമ്പ്യൂട്ടേഷണലായി ചിലവേറിയതാണെങ്കിൽ, useState-ന്റെ ലേസി ഇനിഷ്യലൈസേഷൻ ഫീച്ചർ ഉപയോഗിക്കുക. പ്രാരംഭ മൂല്യം നേരിട്ട് നൽകുന്നതിന് പകരം, പ്രാരംഭ മൂല്യം തിരികെ നൽകുന്ന ഒരു ഫംഗ്ഷൻ നിങ്ങൾക്ക് നൽകാം. ഈ ഫംഗ്ഷൻ പ്രാരംഭ റെൻഡർ സമയത്ത് ഒരിക്കൽ മാത്രമേ പ്രവർത്തിക്കൂ.

ഉദാഹരണം:

            import React, { useState } from 'react';

function LazyInitializationComponent() {
  // Expensive function to calculate initial state
  const expensiveInitialState = () => {
    console.log('Calculating initial state...');
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += i;
    }
    return result;
  };

  const [value, setValue] = useState(expensiveInitialState);

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, കമ്പോണന്റ് മൗണ്ട് ചെയ്യുമ്പോൾ expensiveInitialState ഫംഗ്ഷൻ ഒരിക്കൽ മാത്രമേ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നുള്ളൂ. നിങ്ങൾ expensiveInitialState()-ന്റെ ഫലം നേരിട്ട് useState-ലേക്ക് നൽകുകയാണെങ്കിൽ, പ്രാരംഭ സ്റ്റേറ്റ് ഒരിക്കൽ മാത്രം കണക്കാക്കേണ്ടതുണ്ടെങ്കിലും അത് ഓരോ റീ-റെൻഡറിലും എക്സിക്യൂട്ട് ചെയ്യപ്പെടും.

7. സങ്കീർണ്ണമായ സ്റ്റേറ്റ് ലോജിക്കിനായി useReducer ഉപയോഗിക്കുക

ഒന്നിലധികം സബ്-വാല്യൂകളോ അല്ലെങ്കിൽ സങ്കീർണ്ണമായ സ്റ്റേറ്റ് ട്രാൻസിഷനുകളോ ഉൾപ്പെടുന്ന സങ്കീർണ്ണമായ സ്റ്റേറ്റ് ലോജിക്കുള്ള കമ്പോണന്റുകൾക്ക്, useState-ന് പകരം useReducer ഹുക്ക് ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. useReducer സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യാൻ കൂടുതൽ ഘടനാപരവും പ്രവചിക്കാവുന്നതുമായ ഒരു മാർഗ്ഗം നൽകുന്നു, പ്രത്യേകിച്ചും ബന്ധപ്പെട്ട സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ.

ഉദാഹരണം:

            import React, { useReducer } from 'react';

// Define the reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'RESET':
      return { ...state, count: 0 };
    default:
      return state;
  }
};

// Initial state
const initialState = { count: 0 };

function ReducerComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, useReducer count സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുകയും വിവിധ പ്രവർത്തനങ്ങളെ അടിസ്ഥാനമാക്കി സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ ട്രിഗർ ചെയ്യുന്നതിന് ഒരു dispatch ഫംഗ്ഷൻ നൽകുകയും ചെയ്യുന്നു. ഒന്നിലധികം ബന്ധപ്പെട്ട അപ്‌ഡേറ്റുകളോ സങ്കീർണ്ണമായ ട്രാൻസിഷനുകളോ ഉള്ള സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നതിന് ഈ സമീപനം പ്രത്യേകിച്ചും പ്രയോജനകരമാണ്.

8. ഫംഗ്ഷണൽ കമ്പോണന്റ് മെമ്മോയിസേഷനായി React.memo

പ്രോപ്‌സ് മാറിയിട്ടില്ലാത്തപ്പോൾ റീ-റെൻഡറുകൾ തടയുന്നതിന് നിങ്ങളുടെ ഫംഗ്ഷണൽ കമ്പോണന്റുകളെ React.memo ഉപയോഗിച്ച് പൊതിയുക. React.memo പ്രോപ്‌സുകളുടെ ഒരു ഷാലോ താരതമ്യം നടത്തുകയും പ്രോപ്‌സ് വ്യത്യസ്തമാണെങ്കിൽ മാത്രം കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യുകയും ചെയ്യുന്നു.

ഉദാഹരണം:

            import React from 'react';

// Memoize the component using React.memo
const MyMemoizedComponent = React.memo(({ data }) => {
  console.log('MyMemoizedComponent re-rendered!');
  return <p>Data: {data}</p>;
});

            

              
                Copy
              
            
          

React.memo പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയും, പ്രത്യേകിച്ചും സ്റ്റാറ്റിക് അല്ലെങ്കിൽ അപൂർവ്വമായി മാറുന്ന പ്രോപ്‌സുകളുള്ള, പതിവായി റീ-റെൻഡർ ചെയ്യുന്ന കമ്പോണന്റുകൾക്ക്.

ഒരു ആഗോള പശ്ചാത്തലത്തിൽ useState-നുള്ള മികച്ച രീതികൾ

ഒരു ആഗോള പ്രേക്ഷകർക്കായി റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുമ്പോൾ, ഈ അധിക മികച്ച രീതികൾ പരിഗണിക്കുക:

• അന്താരാഷ്ട്രവൽക്കരണം (i18n): വിവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യാനും നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ യുഐയെ വിവിധ ഭാഷകൾക്കും ലൊക്കേലുകൾക്കും അനുയോജ്യമാക്കാനും react-intl അല്ലെങ്കിൽ i18next പോലുള്ള ഒരു ലൈബ്രറി ഉപയോഗിക്കുക. നിലവിലെ ലൊക്കേലുമായി ബന്ധപ്പെട്ട സ്റ്റേറ്റ് ശ്രദ്ധാപൂർവ്വം കൈകാര്യം ചെയ്യണം, ടെക്സ്റ്റിന്റെയും നമ്പറുകളുടെയും സ്ഥിരവും ശരിയായതുമായ പ്രദർശനം ഉറപ്പാക്കാൻ. ഉദാഹരണത്തിന്, തീയതികൾ, കറൻസികൾ, നമ്പർ ഫോർമാറ്റുകൾ എന്നിവ ലോകമെമ്പാടും വ്യാപകമായി വ്യത്യാസപ്പെട്ടിരിക്കുന്നു.
• പ്രാദേശികവൽക്കരണം (l10n): ഡാറ്റ പ്രദർശിപ്പിക്കുമ്പോൾ വ്യത്യസ്ത സാംസ്കാരിക കീഴ്വഴക്കങ്ങൾ പരിഗണിക്കുക. ഉദാഹരണത്തിന്, തീയതി ഫോർമാറ്റുകൾ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു (MM/DD/YYYY vs DD/MM/YYYY), ഓരോ രാജ്യത്തിനും കറൻസി ചിഹ്നങ്ങൾ വ്യത്യസ്തമാണ് (€, $, ¥). ഈ ക്രമീകരണങ്ങളുമായി ബന്ധപ്പെട്ട സ്റ്റേറ്റ് പ്രാദേശികവൽക്കരിക്കണം.
• വലത്തുനിന്ന്-ഇടത്തോട്ട് (RTL) ലേയൗട്ടുകൾ: അറബി, ഹീബ്രു പോലുള്ള RTL ഭാഷകളെ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പിന്തുണയ്ക്കുന്നുവെന്ന് ഉറപ്പാക്കുക. ലേയൗട്ട് മിററിംഗ് കൈകാര്യം ചെയ്യാൻ CSS ലോജിക്കൽ പ്രോപ്പർട്ടികളും (ഉദാഹരണത്തിന്, margin-left-ന് പകരം margin-inline-start) rtlcss പോലുള്ള ലൈബ്രറികളും ഉപയോഗിക്കുക. ആവശ്യമെങ്കിൽ സ്റ്റേറ്റ് ഉപയോഗിച്ച് ലേയൗട്ടിന്റെ ദിശ കൈകാര്യം ചെയ്യുക.
• സമയ മേഖലകൾ (Time Zones): തീയതികളും സമയങ്ങളും കൈകാര്യം ചെയ്യുമ്പോൾ, സമയ മേഖലകളെക്കുറിച്ച് ശ്രദ്ധിക്കുക. സമയ മേഖല പരിവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യാനും ഉപയോക്താവിന്റെ പ്രാദേശിക സമയ മേഖലയിൽ സമയം പ്രദർശിപ്പിക്കാനും moment-timezone അല്ലെങ്കിൽ date-fns-timezone പോലുള്ള ഒരു ലൈബ്രറി ഉപയോഗിക്കുക. ഉപയോക്താവിന്റെ നിലവിലെ സമയ മേഖല സ്റ്റേറ്റിൽ സംഭരിക്കുകയും അവരുടെ ലൊക്കേഷൻ അടിസ്ഥാനമാക്കി അപ്ഡേറ്റ് ചെയ്യുകയും ചെയ്യാം.
• പ്രവേശനക്ഷമത (a11y): WCAG മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിച്ച്, പ്രവേശനക്ഷമത മനസ്സിൽ വെച്ചുകൊണ്ട് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ രൂപകൽപ്പന ചെയ്യുക. സ്ക്രീൻ റീഡറുകളോ സഹായക സാങ്കേതികവിദ്യകളോ ഉപയോഗിക്കുന്നവർ ഉൾപ്പെടെ, വൈകല്യമുള്ള ആളുകൾക്ക് നിങ്ങളുടെ കമ്പോണന്റുകൾ ഉപയോഗയോഗ്യമാണെന്ന് ഉറപ്പാക്കുക. ഉദാഹരണത്തിന്, എല്ലാ ഫോം ഘടകങ്ങൾക്കും ലേബലുകൾ ഉണ്ടെന്ന് ഉറപ്പാക്കുക, ചിത്രങ്ങൾക്ക് ഇതര ടെക്സ്റ്റ് നൽകുക. സാധാരണ പ്രവേശനക്ഷമതാ പ്രശ്നങ്ങൾ കണ്ടെത്താൻ eslint-plugin-jsx-a11y പോലുള്ള ഒരു ലിന്റർ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

പ്രായോഗിക ഉദാഹരണങ്ങളും ഉപയോഗങ്ങളും

യഥാർത്ഥ സാഹചര്യങ്ങളിൽ ഈ ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ എങ്ങനെ പ്രയോഗിക്കാം എന്നതിന്റെ ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ നോക്കാം:

1. ഒരു സെർച്ച് കമ്പോണന്റ് ഒപ്റ്റിമൈസ് ചെയ്യൽ

ഉപയോക്താവിന്റെ ഇൻപുട്ട് അടിസ്ഥാനമാക്കി ഒരു വലിയ ലിസ്റ്റ് ഫിൽട്ടർ ചെയ്യുന്ന ഒരു സെർച്ച് കമ്പോണന്റ് പരിഗണിക്കുക. ഈ കമ്പോണന്റ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന്, ഫിൽട്ടർ ചെയ്ത ലിസ്റ്റ് മെമ്മോയിസ് ചെയ്യാൻ useMemo-ഉം സെർച്ച് ഹാൻഡ്‌ലർ മെമ്മോയിസ് ചെയ്യാൻ useCallback-ഉം ഉപയോഗിക്കാം.

            import React, { useState, useMemo, useCallback } from 'react';

function SearchComponent({ items }) {
  const [searchTerm, setSearchTerm] = useState('');

  // Memoize the filtered list
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item =>
      item.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [items, searchTerm]);

  // Memoize the search handler
  const handleSearch = useCallback(event => {
    setSearchTerm(event.target.value);
  }, []);

  return (
    <div>
      <input type="text" placeholder="Search..." onChange={handleSearch} />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, items അല്ലെങ്കിൽ searchTerm മാറുമ്പോൾ മാത്രമാണ് filteredItems വീണ്ടും കണക്കാക്കുന്നത്. handleSearch ഫംഗ്ഷൻ മെമ്മോയിസ് ചെയ്തിരിക്കുന്നു, ഇത് ചൈൽഡ് കമ്പോണന്റുകളുടെ അനാവശ്യ റീ-റെൻഡറുകൾ തടയുന്നു.

2. ഒരു ഫോം കമ്പോണന്റ് ഒപ്റ്റിമൈസ് ചെയ്യൽ

ഫോമുകളിൽ പലപ്പോഴും ഒന്നിലധികം സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകളും മൂല്യനിർണ്ണയങ്ങളും ഉൾപ്പെടുന്നു. ഒരു ഫോം കമ്പോണന്റ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന്, ഫോം സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യാൻ useReducer-ഉം ഫോം സമർപ്പണ ഹാൻഡ്‌ലർ മെമ്മോയിസ് ചെയ്യാൻ useCallback-ഉം ഉപയോഗിക്കുക.

            import React, { useReducer, useCallback } from 'react';

// Define the reducer function
const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    case 'SUBMIT':
      // Perform validation here
      return state;
    default:
      return state;
  }
};

// Initial state
const initialFormState = {
  name: '',
  email: '',
  message: ''
};

function FormComponent() {
  const [state, dispatch] = useReducer(formReducer, initialFormState);

  // Memoize the form submission handler
  const handleSubmit = useCallback(event => {
    event.preventDefault();
    dispatch({ type: 'SUBMIT' });
    console.log('Form submitted:', state);
  }, [state]);

  const handleChange = (event) => {
    dispatch({ type: 'UPDATE_FIELD', field: event.target.name, value: event.target.value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={state.name} onChange={handleChange} />
      </label>
      <label>
        Email:
        <input type="email" name="email" value={state.email} onChange={handleChange} />
      </label>
      <label>
        Message:
        <textarea name="message" value={state.message} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, useReducer ഫോം സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നു, useCallback handleSubmit ഫംഗ്ഷനെ മെമ്മോയിസ് ചെയ്യുന്നു. ഇത് ഫോം കമ്പോണന്റിന്റെ പ്രകടനം മെച്ചപ്പെടുത്താൻ സഹായിക്കുന്നു, പ്രത്യേകിച്ചും സങ്കീർണ്ണമായ മൂല്യനിർണ്ണയങ്ങളോ അസിൻക്രണസ് പ്രവർത്തനങ്ങളോ കൈകാര്യം ചെയ്യുമ്പോൾ.

ഉപസംഹാരം

ഫംഗ്ഷണൽ റിയാക്റ്റ് കമ്പോണന്റുകളിൽ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഒരു ശക്തമായ ഉപകരണമാണ് useState ഹുക്ക്. അതിന്റെ സൂക്ഷ്മതകൾ മനസ്സിലാക്കുകയും ഈ ഗൈഡിൽ ചർച്ച ചെയ്ത ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ പ്രയോഗിക്കുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് ഒരു ആഗോള പ്രേക്ഷകർക്കായി മികച്ച പ്രകടനമുള്ളതും, പരിപാലിക്കാൻ എളുപ്പമുള്ളതും, സ്കേലബിൾ ആയതുമായ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ കഴിയും. ഇമ്മ്യൂട്ടബിലിറ്റിക്ക് മുൻഗണന നൽകാനും, ചിലവേറിയ കണക്കുകൂട്ടലുകളും ഇവന്റ് ഹാൻഡ്‌ലറുകളും മെമ്മോയിസ് ചെയ്യാനും, ഉചിതമായ സമയത്ത് സ്റ്റേറ്റിനെ ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കാനും, സങ്കീർണ്ണമായ സ്റ്റേറ്റ് ലോജിക്കിനായി useReducer ഉപയോഗിക്കുന്നത് പരിഗണിക്കാനും ഓർമ്മിക്കുക. നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ ആഗോള പശ്ചാത്തലം എപ്പോഴും മനസ്സിൽ സൂക്ഷിക്കുക, i18n, l10n, RTL ലേയൗട്ടുകൾ, സമയ മേഖലകൾ, പ്രവേശനക്ഷമത എന്നിവ പരിഗണിക്കുക. ഈ മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെ, നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ വേഗതയേറിയതും കാര്യക്ഷമവുമാണെന്ന് മാത്രമല്ല, ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക് പ്രവേശനക്ഷമവും ഉപയോഗയോഗ്യവുമാണെന്നും ഉറപ്പാക്കാൻ നിങ്ങൾക്ക് കഴിയും.

കൂടുതൽ പഠനത്തിന്

• റിയാക്റ്റ് ഡോക്യുമെന്റേഷൻ: https://reactjs.org/docs/hooks-state.html
• useReducer ഹുക്ക്: https://reactjs.org/docs/hooks-reference.html#usereducer
• useMemo ഹുക്ക്: https://reactjs.org/docs/hooks-reference.html#usememo
• useCallback ഹുക്ക്: https://reactjs.org/docs/hooks-reference.html#usecallback
• React.memo: https://reactjs.org/docs/react-api.html#reactmemo